<template>
  <!-- 播放器 -->

  <vue3VideoPlay
    :width="vWidth"
    :height="vHeight"
    :src="vSrc"
    :autoPlay="vAutoPlay"
    :muted="vMuted"
    :speedRate="vSpeedRate"
    :controls="false"
    :controlBtns="vControlBtns"
    :poster="vPoster"
    :loop="vLoop"
    :preload="vPreload"
  />


</template>

<script>
export default {
  name: 'MyVideo',
  data() {
    return {
      /* ===== 外观尺寸 ===== */
      vWidth: '240px',            // 播放器宽度
      vHeight: '135px',           // 播放器高度

      /* ===== 视频源 ===== */
      vSrc: '/videos/test.mp4',   // 视频地址（本地/static 文件）

      /* ===== 自动行为 ===== */
      vAutoPlay: true,           // 是否自动播放
      vMuted: true,              // 是否默认静音
      vLoop: true,               // 是否循环播放
      vPreload: 'auto',           // 预加载策略：auto/metadata/none

      /* ===== 速度控制 ===== */
      vSpeedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], // 倍速列表

      /* ===== 底部按钮 ===== */
      vControlBtns: [], // 显示的按钮 
      /*

      /* ===== 封面图 ===== */
      vPoster: ''                 // 视频封面（可选，留空即无）
    };
  }
};
</script>

<style scoped>
/* 如需居中或加边框，自行补充 */

.vcp-player *,
.vcp-video video {
  outline: none !important;   /* 去掉浏览器默认轮廓 */
  -webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}

</style>

